<!--
  公共list组件
  @click="$emit('click',$event)"
  不要🙅问我为什么 用click事件传值而不是用router-link 跳转,
  因为你这个list的部分位置有点击 做成click的是给自己留了条后路
-->
<template>
  <div class="lists">
    <!-- 单行的list 组件 -->
    <ul v-if="lists.type == 'asset' || lists.type == 'oil'">
      <li
        v-for="(item,index) in lists.listArray"
        :data-name="item.name"
        :key="index"
        @click="$emit('click',$event)"
      >
        <div class="icon-name">
          <span
            v-if="item.icon"
            class="icon"
            :style="item.size ? `width:${item.size}px; height:${item.size};` : '' "
          >
            <img :src="item.icon" :alt="item.name">
          </span>
          <span
            class="name"
            :style="item.color || item.fontSize ? `color:${item.color};font-size:${item.fontSize}px` : '' "
          >{{item.name}}</span>
        </div>
        <span
          class="amount"
          v-if="item.amount"
          :style="item.color ? `color:${item.color}` : '' "
        >{{item.amount}}</span>
        <span v-if="item.percentage" class="percentage">{{item.percentage}}</span>
      </li>
    </ul>

    <!-- 上下结构的list组件 -->
    <ul v-if="lists.type == 'details'">
      <li
        class="details-li"
        v-for="(item,index) in lists.listArray"
        :key="index"
        @click="$emit('click',$event)"
      >
        <div class="icon-name">
          <span class="icon">
            <img :src="item.icon" :alt="item.status">
          </span>
          <div class="status-con">
            <span class="date">{{item.date}}</span>
            <span
              class="status"
              :style="!item.recordStatus ? `color:${item.color}` : ''"
            >{{item.status}}</span>
          </div>
        </div>
        <div>
          <span v-if="item.recordStatus" class="record-status">{{item.recordStatus}}</span>
          <span class="percentage" :style="`color:${item.color}`">{{item.money}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "lists",
  props: {
    lists: {
      type: Object,
      required: true
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '../utils/styl/mixin.styl'
// 资产里面的list
ul
  width 100%
  li
    display flex
    justify-content space-between
    line-height rem(49)
    align-items center
    background-color $listBg
    margin-top rem(8)
    box-sizing border-box
    padding 0 rem(20) 0 rem(17)
    .icon-name
      display flex
      flex-direction row
      align-items center
      .icon
        width rem(30)
        height rem(30)
        margin-right rem(17)
        img
          width 100%
          height 100%
          object-fit contain
    span
      display block
      color $fontColor
      font-size rem(18)
.details-li
  line-height rem(14)
  padding rem(12) rem(20)
  .icon-name
    .icon
      width rem(16)
      height rem(16)
      margin-right rem(10)
      img
        width 100%
        height 100%
        object-fit contain
    .status-con
      display flex
      flex-direction column
      justify-content flex-start
      text-align left
      span
        font-size rem(12)
        line-height rem(16)
        font-weight bold
        height 100%
      .date
        color $tabBarColor
  .percentage
    padding-top rem(10)
  .record-status
    text-align right
    color $tabBarColor
    font-size rem(12)
</style>
